<script>
export default {
  data() {
    return {
      userInfo: {
        nickname: '张三',
        email: 'zhangsan@example.com',
        phone: '13800138000'
      },
      errors: {
        nickname: '',
        email: '',
        phone: ''
      }
    };
  },
  methods: {
    saveUserInfo() {
      // 简单验证
      let isValid = true;

      // 昵称验证
      if (!this.userInfo.nickname) {
        this.errors.nickname = '昵称不能为空';
        isValid = false;
      } else {
        this.errors.nickname = '';
      }

      // 邮箱验证
      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      if (!this.userInfo.email) {
        this.errors.email = '邮箱不能为空';
        isValid = false;
      } else if (!emailRegex.test(this.userInfo.email)) {
        this.errors.email = '请输入有效的邮箱地址';
        isValid = false;
      } else {
        this.errors.email = '';
      }

      // 手机号验证
      const phoneRegex = /^1[3-9]\d{9}$/;
      if (!this.userInfo.phone) {
        this.errors.phone = '手机号不能为空';
        isValid = false;
      } else if (!phoneRegex.test(this.userInfo.phone)) {
        this.errors.phone = '请输入有效的手机号';
        isValid = false;
      } else {
        this.errors.phone = '';
      }

      if (isValid) {
        // 这里可以添加API调用来保存用户信息
        alert('保存成功！');
      }
    }
  }
};
</script>

<template>
  <div class="profile-edit">
    <header class="header">
      <h1>个人信息</h1>
    </header>

    <div class="form-container">
      <div class="form-group">
        <label for="nickname">昵称</label>
        <input
          id="nickname"
          v-model="userInfo.nickname"
          placeholder="请输入昵称"
          type="text"
        >
        <p v-if="errors.nickname" class="error-message">{{ errors.nickname }}</p>
      </div>

      <div class="form-group">
        <label for="email">邮箱</label>
        <input
          id="email"
          v-model="userInfo.email"
          placeholder="请输入邮箱"
          type="email"
        >
        <p v-if="errors.email" class="error-message">{{ errors.email }}</p>
      </div>

      <div class="form-group">
        <label for="phone">手机号</label>
        <input
          id="phone"
          v-model="userInfo.phone"
          placeholder="请输入手机号"
          type="tel"
        >
        <p v-if="errors.phone" class="error-message">{{ errors.phone }}</p>
      </div>

      <button class="save-button" @click="saveUserInfo">保存</button>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.profile-edit {
  max-width: 100%;
  width: 100%;
  margin: 0 auto;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

  .header {
    text-align: center;
    padding: 15px 0;
    background-color: #f8f8f8;
    border-bottom: 1px solid #eaeaea;

    h1 {
      margin: 0;
      font-size: 18px;
      font-weight: 500;
      color: #333;
    }
  }

  .form-container {
    padding: 20px 15px;

    .form-group {
      margin-bottom: 20px;

      label {
        display: block;
        margin-bottom: 8px;
        font-size: 14px;
        color: #333;
        font-weight: 500;
      }

      input {
        width: 100%;
        padding: 12px 15px;
        border: 1px solid #ddd;
        border-radius: 8px;
        font-size: 16px;
        color: #333;
        background-color: #fff;
        box-sizing: border-box;

        &:focus {
          outline: none;
          border-color: #007aff;
          box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.2);
        }

        &::placeholder {
          color: #999;
        }
      }

      .error-message {
        margin-top: 5px;
        color: #ff3b30;
        font-size: 12px;
      }
    }

    .save-button {
      width: 100%;
      padding: 14px 0;
      background-color: #007aff;
      color: white;
      border: none;
      border-radius: 8px;
      font-size: 16px;
      font-weight: 500;
      cursor: pointer;
      transition: background-color 0.2s;

      &:hover {
        background-color: #0062cc;
      }

      &:active {
        background-color: #0051a8;
      }
    }
  }
}

// 移动端适配
@media screen and (min-width: 768px) {
  .profile-edit {
    max-width: 450px;
    margin: 0 auto;
    border: 1px solid #eaeaea;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    overflow: hidden;
  }
}
</style>
